<template>
  <div>
    <el-button @click="logOut()">退出登录</el-button>

    <el-descriptions direction="vertical" :column="2" border>
      <template slot="extra">
        <el-button
          type="primary"
          icon="el-icon-edit"
          plain
          @click="BeforeBaseInfoEdit()"
          size="small"
          >修改基本信息</el-button
        >
      </template>
      <el-descriptions-item label="用户名">{{
        ruleForm.nickname
      }}</el-descriptions-item>
      <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
      <el-descriptions-item label="邮箱"
        >{{ ruleForm.email
        }}<el-button style="margin-left: 20px" type="primary"
          >修改邮箱</el-button
        ></el-descriptions-item
      >
      <el-descriptions-item label="密码"
        ><span
          >******<el-button
            style="margin-left: 20px"
            type="primary"
            @click="BeforePasswordEdit()"
            >修改密码</el-button
          ></span
        ></el-descriptions-item
      >
      <el-descriptions-item label="居住地" :span="2"
        >苏州市</el-descriptions-item
      >
      <el-descriptions-item label="备注">
        <el-tag size="small">学校</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="联系地址">{{
        ruleForm.address
      }}</el-descriptions-item>
    </el-descriptions>

    <!-- editForm 编辑基础信息 -->
    <el-dialog title="编辑基础信息" :visible.sync="editFormVisible">
      <el-form :model="ruleForm">
        <el-form-item label="用户昵称" :label-width="formLabelWidth">
          <el-input v-model="ruleForm.nickname" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleEdit()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改密码 -->
    <el-dialog title="修改密码" :visible.sync="PasswordFormVisible">
      <el-form :model="ruleForm">
        <el-form-item label="旧密码" :label-width="formLabelWidth">
          <el-input v-model="oldPass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="新密码" :label-width="formLabelWidth">
          <el-input v-model="newPass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认新密码" :label-width="formLabelWidth">
          <el-input v-model="checkPass" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="PasswordFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleEdit()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// eslint-disable-next-line
import { editUser, getUser } from "@/api/user";
import router from "@/router/routers";
export default {
  name: "Center",
  data() {
    return {
      editFormVisible: false,
      PasswordFormVisible: false,
      formLabelWidth: "120px",
      oldPass: null,
      newPass: null,
      checkPass: null,
      ruleForm: {
        id: localStorage.getItem("UID"),
        email: localStorage.getItem("NAME"),
        avatar: null,
        nickname: null,
        password: null,
        address: null,
      },
      $p: {},
      rules: {},
    };
  },

  mounted() {
    this.getUserInfo();
  },
  methods: {
    getUserInfo() {
      this.ruleForm = this.$store.getters.GetUserInfo;
      console.log(this.ruleForm);
    },
    logOut() {
      console.log("退出");
      localStorage.clear();
      sessionStorage.clear();
      this.$store.commit("SET_USER", null);
      router.push({ path: "/index" });
    },
    BeforeBaseInfoEdit() {
      // 提交之前对数据进行处理(图片,分类)
      this.editFormVisible = true;
    },
    BeforePasswordEdit() {
      this.PasswordFormVisible = true;
    },
    handleEdit() {
      editUser(this.ruleForm).then((res) => {
        console.log(res);
      });
    },
  },
};
</script>

<style scoped>
</style>